<template>
	<view class="container">
		<nav-top :title="navTitle" :type="navType" />
		<view class="suggestion">
			<text class="desc">猜你喜欢</text>
			<view class="dishes-list">
				<view class="dish" v-for="(item,index) in dishes" :key="index">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	const navTitle = "q";
	const navType = "search";
	const dishes = reactive(["火锅冒菜","鸡公煲","杨国富麻辣烫","炒米粉","爽爽美蛙鱼","luckin coffee瑞幸咖啡","三米粥铺","香辣口味虾"])
</script>

<style lang="scss" scoped>
	.container {
		background: #fff;
		height: 100vh;

		.suggestion {
			padding: 48rpx 0 8rpx;
			border-top: 2rpx solid #E6E6E6;

			.desc {
				color: #333333;
				font-weight: 600;
				font-size: 32rpx
			}

			.dishes-list {
				margin-top: 24rpx;
				display: flex;
				gap: 44rpx;
				flex-wrap: wrap;

				.dish {
					background: #F5F5F5;
					border-radius: 8rpx;
					padding: 8rpx 20rpx;
					height: 48rpx;
					color: #333333;
					font-weight: 400;
					font-size: 24rpx;
				}
			}
		}
	}
</style>